<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>易买网 - 首页</title>
    <link type="text/css" rel="stylesheet" href="css/style.css"/>
    <script type="text/javascript" src="scripts/function.js"></script>
  </head>
  <body>
    <div id="header" class="wrap">
      <div id="logo"><img src="images/logo.gif"/></div>
      <div class="help"><a href="#" class="shopping">购物车</a><a href="login.html">登录</a><a
          href="register.html">注册</a><a href="guestbook.html">留言</a></div>
      <div class="navbar">
        <ul class="clearfix">
          <li class="current"><a href="#">首页</a></li>
          <li><a href="#">图书</a></li>
          <li><a href="#">百货</a></li>
          <li><a href="#">品牌</a></li>
          <li><a href="#">促销</a></li>
        </ul>
      </div>
    </div>
    <div id="childNav">
      <div class="wrap">
        <ul class="clearfix">
          <li class="first"><a href="#">音乐</a></li>
          <li><a href="#">影视</a></li>
          <li><a href="#">少儿</a></li>
          <li><a href="#">动漫</a></li>
          <li><a href="#">小说</a></li>
          <li><a href="#">外语</a></li>
          <li><a href="#">数码相机</a></li>
          <li><a href="#">笔记本</a></li>
          <li><a href="#">羽绒服</a></li>
          <li><a href="#">秋冬靴</a></li>
          <li><a href="#">运动鞋</a></li>
          <li><a href="#">美容护肤</a></li>
          <li><a href="#">家纺用品</a></li>
          <li><a href="#">婴幼奶粉</a></li>
          <li><a href="#">饰品</a></li>
          <li class="last"><a href="#">Investor Relations</a></li>
        </ul>
      </div>
    </div>
    <div id="position" class="wrap">
      您现在的位置：<a href="index.html">易买网</a> &gt; 在线留言
    </div>
    <div id="main" class="wrap">
      <div class="lefter">
        <div class="box">
          <h2>商品分类</h2>
          <dl>
            <dt>图书音像</dt>
            <dd><a href="product-list.html">图书</a></dd>
            <dd><a href="product-list.html">音乐</a></dd>
            <dt>百货</dt>
            <dd><a href="product-list.html">运动健康</a></dd>
            <dd><a href="product-list.html">服装</a></dd>
            <dd><a href="product-list.html">家居</a></dd>
            <dd><a href="product-list.html">美妆</a></dd>
            <dd><a href="product-list.html">母婴</a></dd>
            <dd><a href="product-list.html">食品</a></dd>
            <dd><a href="product-list.html">手机数码</a></dd>
            <dd><a href="product-list.html">家具首饰</a></dd>
            <dd><a href="product-list.html">手表饰品</a></dd>
            <dd><a href="product-list.html">鞋包</a></dd>
            <dd><a href="product-list.html">家电</a></dd>
            <dd><a href="product-list.html">电脑办公</a></dd>
            <dd><a href="product-list.html">玩具文具</a></dd>
            <dd><a href="product-list.html">汽车用品</a></dd>
          </dl>
        </div>
      </div>
      <div class="main">
        <div class="guestbook">
          <h2>全部留言</h2>
          <ul id="comments">
            <li>
              <dl>
                <dt>那个什么衣服贵吗</dt>
                <dd class="author">网友：张三丰 <span class="timer">2010:10:10 20:00:01</span></dd>
                <dd>不贵</dd>
              </dl>
            </li>
            <li>
              <dl>
                <dt>那个什么衣服贵吗</dt>
                <dd class="author">网友：张三丰 <span class="timer">2010:10:10 20:00:01</span></dd>
                <dd>不贵</dd>
              </dl>
            </li>
            <li>
              <dl>
                <dt>那个什么衣服贵吗</dt>
                <dd class="author">网友：张三丰 <span class="timer">2010:10:10 20:00:01</span></dd>
                <dd>不贵</dd>
              </dl>
            </li>
          </ul>
          <div class="clear"></div>
          <div class="pager">
            <ul class="clearfix" id="page">
              <li><a href="#">上一页</a></li>
              <li class="current">1</li>
              <li><a href="#">2</a></li>
              <li><a href="#">3</a></li>
              <li><a href="#">4</a></li>
              <li><a href="#">5</a></li>
              <li><a href="#">下一页</a></li>
            </ul>
          </div>
          <div id="reply-box">
            <form id="message">
              <table>
                <tr>
                  <td class="field">留言内容：</td>
                  <td><textarea name="guestContent" id="guestContent"></textarea></td>
                </tr>
                <tr>
                  <td></td>
                  <td><label class="ui-blue"><input type="button" id="sub" name="submit"
                                                    value="提交留言"/></label></td>
                </tr>
              </table>
            </form>
          </div>
        </div>
      </div>
      <div class="clear"></div>
    </div>
    <div id="footer">
      Copyright &copy; 2010 All Rights Reserved. 京ICP证1000001号
    </div>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
      $(function () {
        showComment();
        $('#sub').on('click', function () {
          if ($('#guestContent').val().length == 0) {
            alert("留言不得为空");
            return;
          }
          $.ajax({
            url: 'commentAddServlet',
            type: 'post',
            data: {guestContent: $('#guestContent').val()},
            dataType: 'json',
            success: function (data) {
              if (data.flag) {
                location.reload();
              } else {
                if (confirm(data.message)) {
                  location.href = 'http://localhost:8080/login.html';
                }
              }
            }
          });
        });
      });

      /**
       * 展示所有留言
       * @param currentPage 当前页码
       */
      function showComment(currentPage) {
        $.ajax({
          url: 'commentShowServlet',
          data: {currentPage: currentPage},
          type: 'post',
          dataType: 'json',
          success: function (data) {
            console.log(data);

            // 展示留言数据
            let comments = data.list;
            let str = '';
            for (let i = 0; i < comments.length; i++) {
              str += '<li>'
                  + '              <dl>'
                  + '                <dt>' + comments[i].ecContent + '</dt>'
                  + '                <dd class="author">网友：' + comments[i].ecNickName
                  + ' <span class="timer">' + comments[i].ecCreateTime + '</span></dd>\n'
                  + '                <dd>' + (comments[i].ecReply == null ? ""
                      : comments[i].ecReply) + '</dd>\n'
                  + '              </dl>';
            }
            $('#comments').html(str);

            // 页码信息

            //总页数
            let totalPage = data.totalPage;
            var currentPage = data.currentPage;
            let cur_str = '';
            if (currentPage > 1) {
              cur_str += '<li><a href="javascript:void(0)" onclick="showComment(' + currentPage
                  + ' - 1)">上一页</a></li>';
            }
            let start;
            let end;
            if (totalPage <= 5 || currentPage <= 3) {
              start = 1;
              end = totalPage;
            } else if (currentPage > 3 && currentPage < totalPage - 2) {
              start = currentPage - 2;
              end = currentPage + 2;
            } else {
              start = totalPage - 4;
              end = totalPage;
            }

            for (let i = start; i <= end; i++) {
              if (i == currentPage) {
                cur_str += '<li class="current">' + i + '</li>';
                continue;
              }
              cur_str += '<li onclick="showComment(' + i + ')">' + i + '</li>';
            }

            if (currentPage < totalPage) {
              cur_str += '<li><a href="javascript:void(0)" onclick="showComment(' + currentPage
                  + ' + 1)">下一页</a></li>';
            }
            $('#page').html(cur_str);

            window.scrollTo(0, 0);
          }
        });
      }
    </script>
  </body>
</html>
